<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>批量创建dom优化</title>
    33333333
</head>

<body>
    <!-- <ul>
        <li>Coffee</li>
        <li>Tea</li>
    </ul>
    <p id="demo">单击按钮更改列表项,使用createDocumentFragment方法,然后在列表的最后一个孩子添加列表项。</p>
    <button onclick="myFunction()">点我</button> -->
    <script>
        // function myFunction(){
        //     var d=document.createDocumentFragment();
        //     // d.appendChild(document.getElementsByTagName("LI")[0]);
        //     d.innerHTML="Milk";
        //     document.getElementsByTagName("ul").appendChild(d);
        // };
66666666666666666666666
        function Parent(name) {
            this.name = name;
            this.colors = ['red', 'blue', 'green'];
        }
        Parent.prototype.getName = function () {
            console.log(this.name)
        }
        function Child(name, age) {
            Parent.call(this, name);
            this.age = age;
        }
        // 关键的三步
        var F = function () { };
        F.prototype = Parent.prototype;
        Child.prototype = new F();
        var child1 = new Child('kevin', '18');
        console.log(child1);

        function object(o) {
            function F() { }
            F.prototype = o;
            return new F();
        }
        function prototype(child, parent) {
            var prototype = object(parent.prototype);
            prototype.constructor = child;
            child.prototype = prototype;
        }
        // 当我们使用的时候：
        prototype(Child, Parent);



        function inheritPrototype(subType, superType) {
            var protoType = Object.create(superType.prototype);    //创建对象
            protoType.constructor = subType;                    //增强对象
            subType.prototype = protoType;                        //指定对象
        }
        function SuperType(name) {
            this.name = name;
            this.colors = ["red", "blue", "green"];
        }
        SuperType.prototype.sayName = function () {
            alert(this.name);
        }

        function SubType(name, age) {
            SuperType.call(this, name);

            this.age = age;
        }
        inheritPrototype(SubType, SuperType)
        SubType.prototype.sayAge = function () {
            alert(this.age);
        }
        var instance = new SubType("Bob", 18);
        instance.sayName();
        instance.sayAge();
    </script>

</html>